<template>
  <div class="recommend">
    <header class="header-fiexed">
      <van-nav-bar :title="$route.meta.head.title"
                   right-text="跳过"
                   @click-right="skip" />
    </header>

    <div class="recommon-form">
      <van-field class="solid-bottom"
                 v-model="inviterMobile"
                 placeholder="请填写推荐人" />

      <van-button type="default"
                  class="login-btn"
                  round
                  block
                  :disabled="this.inviterMobile === ''"
                  @click="bindTkInfo">确定</van-button>
    </div>
  </div>
</template>

<script>
import { phoneRules, checkFn } from '@/utils/formRules'
import { setInviter } from '@/api/memberInfo'
import { mapState } from 'vuex'
export default {
  name: 'Recommend',
  data() {
    return {
      inviterMobile: ''
    }
  },
  computed: {
    ...mapState({
      memberId: state => state.user.info.member_id
    })
  },
  methods: {
    bindTkInfo() {
      let { state, error } = checkFn(phoneRules, this.inviterMobile)
      if (state) {
        this.$toast({
          type: 'fail',
          message: error
        })
      } else {
        // 绑定托客人
        setInviter(this.inviterMobile, this.memberId)
          .then(res => {
            this.$toast({
              type: 'success',
              message: '绑定成功!',
              duration: 3000,
              onClose: () => {
                this.$router.replace({ name: 'MemberIndex' })
              }
            })
          })
          .catch(res => {
            this.$toast({
              type: 'fail',
              message: res.message
            })
          })
      }
    },

    /**
     * 跳过绑定推荐人
     * 跳过的时候也要调接口，绑定默认推荐人
     */
    skip() {
      this.$router.replace({ name: 'MemberIndex' })
      // setInviter('', this.memberId)
      //   .then(res => {
      //     // 跳过
      //     this.$router.replace({ name: 'MemberIndex' })
      //   })
      //   .catch(res => {
      //     this.$router.replace({ name: 'MemberIndex' })
      //   })
    }
  }
}
</script>

<style lang="scss">
.recommend {
  /deep/ .van-nav-bar__text {
    color: #666666;
  }
  .recommon-form {
    border-top: 10px solid #f5f6fa;
    padding: 10px 18px;
  }
  .login-btn {
    width: 100%;
    height: 44px;
    margin-top: 50px;
    background-color: #000000;
    color: #fbc491;
    font-size: 16px;
    &.van-button--disabled {
      opacity: 1;
      background-color: #f4f4f4;
      color: #666666;
    }
  }
}
</style>
